<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="项目负责人" prop="pi">
        <el-input
          v-model="queryParams.pi"
          placeholder="请输入项目负责人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item style="padding-left: 40px;">
        <el-button  type="primary"  size="mini" @click="handleQuery">搜索</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:property:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
           type="primary" plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:role:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
           type="primary" plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:role:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="left" />
      <el-table-column label="项目名称" align="left" prop="projectName" />
      <el-table-column label="专业门类选择" align="left" prop="majorValue" />
      <el-table-column label="标准性质" align="left" prop="standardNature" />
      <el-table-column label="标准状态" align="left" prop="standardStatus" />
      <el-table-column label="制定或修订" align="left" prop="tp" />
      <el-table-column label="项目负责人" align="left" prop="pi" />
      <el-table-column label="电话" align="left" prop="tel" />
      <el-table-column label="邮件" align="left" prop="email" />
      <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['standard:m:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['standard:m:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改立项通知（市监）对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1080px" append-to-body>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 16px;font-weight: 600;">项目基础信息</span>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关键词" prop="keyword">
              <el-input v-model="form.keyword" placeholder="请输入关键词" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业门类选择" prop="majorValue">
              <el-input v-model="form.majorValue" placeholder="请输入专业门类选择" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准性质" prop="standardNature">
              <el-select v-model="standardNature" placeholder="请选择">
                <el-option v-for="dict in typeStandardNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准状态" prop="standardStatus">
              <el-select v-model="standardStatus" placeholder="请选择">
                <el-option v-for="dict in typeStandardStatusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="制定或修订" prop="tp">
              <el-radio-group v-model="form.tp" size="small">
                <el-radio-button label="制定"></el-radio-button>
                <el-radio-button label="修订"></el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人" prop="pi">
              <el-input v-model="form.pi" placeholder="请输入项目负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="tel">
              <el-input v-model="form.tel" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮件" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮件" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准序号" prop="projectName">
              <el-input v-model="form.projectName" placeholder="项目序号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标准组织" prop="keyword">
              <el-input v-model="form.keyword" placeholder="请输入标准组织" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织类别" prop="majorValue">
              <el-input v-model="form.majorValue" placeholder="请输入组织类别" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国标分类" prop="standardNature">
              <el-select v-model="standardNature" placeholder="请选择">
                <!-- <el-option v-for="dict in typeStandardNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" -->
                <el-option v-for="dict in typeStandardNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布日期" prop="">
              <el-date-picker v-model="pubdt" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实施日期" prop="">
              <el-date-picker v-model="impldt" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作废日期" prop="">
              <el-date-picker v-model="deldt" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-form>

      </el-card>

      <el-card class="box-card"  style="margin-top: 20px;" >
        <div slot="header" class="clearfix">
          <span style="font-size: 16px;font-weight: 600;">标准规范历史信息</span>
        </div>

        <el-form ref="form" :model="form" :rules="rules" label-width="130px" >
          <el-col :span="24">
            <el-form-item label="标准规范发布稿：" prop="">

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经办人：" prop="">

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="部门负责人" prop="">

            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批处复核人" prop="">

            </el-form-item>
          </el-col>
        </el-form>

      </el-card>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import { listM, getM, delM, addM, updateM, exportM } from "@/api/standard/m";


export default {
  name: "M",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 立项通知（市监）表格数据
      mList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      typeOptions: [],
      typeStandardNatureOptions: [],
      typeStandardStatusOptions: [],
      standardNature: null,
      standardStatus: null,
      tp: '制定',
      pubdt: '',
      impldt: '',
      deldt: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userid: null,
        wid: null,
        nname: null,
        eunit: null,
        pctm: null,
        ld: null,
        ldp: null,
        ldu: null,
        projectName: null,
        keyword: null,
        majorValue: null,
        functionValue: null,
        standardNature: null,
        standardStatus: null,
        tp: null,
        standardNo: null,
        hostUnit: null,
        planTime: null,
        pi: null,
        post: null,
        tel: null,
        email: null,
        draftUnit: null,
        goal: null,
        infos: null,
        tech: null,
        analysis: null,
        property: null,
        hostUnitOpinion: null,
        authUnitOpinion: null,
        stdTp: null,
        stdUnit: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userid: [
          { required: true, message: "用户id不能为空", trigger: "blur" }
        ],
        wid: [
          { required: true, message: "工作流节点id不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    //标准性质
    this.getDicts('standard_nature_type').then(response => {
      this.typeStandardNatureOptions = response.data
    });
    //标准状态
    this.getDicts('standard_status_type').then(response => {
      this.typeStandardStatusOptions = response.data
    });
  },
  methods: {
    /** 查询立项通知（市监）列表 */
    getList() {
      this.loading = true;
      listM(this.queryParams).then(response => {
        this.mList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        nid: null,
        userid: null,
        wid: null,
        nname: null,
        eunit: null,
        pctm: null,
        ld: null,
        ldp: null,
        ldu: null,
        projectName: null,
        keyword: null,
        majorValue: null,
        functionValue: null,
        standardNature: null,
        standardStatus: "0",
        tp: null,
        standardNo: null,
        hostUnit: null,
        planTime: null,
        pi: null,
        post: null,
        tel: null,
        email: null,
        draftUnit: null,
        goal: null,
        infos: null,
        tech: null,
        analysis: null,
        property: null,
        hostUnitOpinion: null,
        authUnitOpinion: null,
        stdTp: null,
        stdUnit: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.nid)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "标准规范基础属性信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const nid = row.nid || this.ids
      getM(nid).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改立项通知（市监）";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.nid != null) {
            updateM(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addM(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const nids = row.nid || this.ids;
      this.$confirm('是否确认删除立项通知（市监）编号为"' + nids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delM(nids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有立项通知（市监）数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportM(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
